// 首页
<template>
  <div>
    <van-nav-bar title="首页">
      <template #left>
        <span>{{ wardName }}</span>
      </template>
      <template #right>
        <span @click="touserinfo">{{ uname }}</span>
      </template>
    </van-nav-bar>
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onblur()"
      @cancel="onclear()"
      @clear="onclear()"
    />
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      style="height: 100vh;"
    >
      <van-cell
        v-for="item in list"
        :key="item.id"
        :title="item.name"
        :border="false"
        @click="toitem(item)"
        class="custom-cell"
      >
        <template #right-icon>
          <van-icon name="arrow" size="16rpx" color="#999" />
        </template>
        <template #label>
          入院日期：{{ formatAdmissionDate(item.admissiondate) }}
        </template>

        <template #value>
          <div class="info-card">
            <!-- 第一组：基础信息 -->
            <div class="info-group">
              <van-row type="flex" justify="space-between">
                <van-col span="12">
                  <div class="info-item">
                    <van-tag plain type="primary" class="label">住院号</van-tag>
                    <span class="info-text primary">{{ item.zyh }}</span>
                  </div>
                </van-col>
                <van-col span="12">
                  <div class="info-item">
                    <van-tag plain type="danger" class="label">身份证</van-tag>
                    <span class="info-text danger">{{
                      formatIDCard(item.carid)
                    }}</span>
                  </div>
                </van-col>
              </van-row>
            </div>

            <!-- 第二组：患者特征 -->
            <div class="info-group">
              <van-row type="flex" justify="space-between">
                <van-col span="12">
                  <div class="info-item">
                    <van-tag plain type="success" class="label">性别</van-tag>
                    <span class="info-text success">{{ item.sex }}</span>
                  </div>
                </van-col>
                <van-col span="12">
                  <div class="info-item">
                    <van-tag plain type="warning" class="label">年龄</van-tag>
                    <span class="info-text warning">{{ item.age }}岁</span>
                  </div>
                </van-col>
              </van-row>
            </div>

            <!-- 第三组：住院信息 -->
            <div class="info-group">
              <van-row type="flex" justify="start">
                <van-col span="24">
                  <div class="info-item">
                    <van-tag plain type="primary" class="label">病区</van-tag>
                    <span class="info-text">{{
                      item.wardname || "未分配"
                    }}</span>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </template>
      </van-cell>
    </van-list>
    <van-back-top />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getPatientList } from "../api/Patient";
import dayjs from "dayjs";

const router = useRouter();
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const value = ref("");
let current = 1;

const uname = ref("");
const wardName = ref("");

const onLoad = () => {
  getdata();
  uname.value = JSON.parse(localStorage.getItem("username")).name;
  wardName.value = JSON.parse(localStorage.getItem("ward")).wardName;
};
function getdata() {
  getPatientList({
    page: {
      current,
      size: 5,
    },
    patientinfo: {
      name: value.value,
      wardcode:
        JSON.parse(localStorage.getItem("ward") || "{}")?.wardId ?? null,
    },
  })
    .then((res) => {
      console.log(res.data);
      list.value = [...list.value, ...res.data.records];
      current++;
      // 加载状态结束
      loading.value = false;
      // 数据全部加载完成
      if (list.value.length >= res.data.total) {
        finished.value = true;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
function onblur() {
  console.log("onblur");
  current = 1;
  list.value = [];
  finished.value = false;
  getdata();
}

function onclear() {
  value.value = "";
  current = 1;
  list.value = [];
  finished.value = false;
  getdata();
}

function toitem(item) {
  console.log("toitem");
  localStorage.setItem("selectitem", JSON.stringify(item));
  router.push("/SelectItemFun");
}

function touserinfo() {
  router.push("/userInfo");
}

const formatIDCard = (id) => {
  if (!id) return "未登记";
  return id.replace(/^(\d{6})\d+([A-Za-z0-9]{4})$/, "$1********$2");
};

const formatAdmissionDate = (dateStr) => {
  return dayjs(dateStr).format("YYYY-MM-DD HH:mm");
};

// const getAvatarText = (item) => {
//   return item.name[0].toUpperCase() || '';
// }

// const getAvatarColor = (sex) => {
//   return sex === '女' ? '#FFB6C1' : '#90CAF9';
// }
const getAvatar = (item) => {
  // 这里可以添加真实头像逻辑，示例使用随机颜色
  const color = item.sex === "女" ? "#FFB6C1" : "#90CAF9";
  return `https://dummyimage.com/44x44/${color}/fff&text=${item.name[0]}`;
};
</script>

<style scoped>
/* 新增渐变背景和主题色 */
.page-bg {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

.custom-cell {
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
  border-left: 8rpx solid transparent; /* 预留状态标识 */
}

.custom-cell:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

/* 标签样式升级 */
.label {
  font-size: 12rpx;
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
  font-weight: 500;
  transform: scale(0.95);
  transition: all 0.2s;
}

.label.primary {
  background: rgba(90, 140, 255, 0.1);
  color: #5a8cff;
}

.label.success {
  background: rgba(65, 180, 138, 0.1);
  color: #41b48a;
}

.label.warning {
  background: rgba(255, 171, 71, 0.1);
  color: #ffab47;
}

.label.danger {
  background: rgba(255, 87, 87, 0.1);
  color: #ff5757;
}

/* 信息文本样式 */
.info-text {
  color: #333;
  font-weight: 500;
  font-size: 14rpx;
  margin-left: 8rpx;
}

/* 年龄标签特殊处理 */
.age-label {
  margin-left: 16rpx;
  padding: 4rpx 8rpx;
}

/* 搜索栏样式优化 */
::v-deep(.van-search) {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  padding: 16rpx;
  margin: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

::v-deep(.van-search__action) {
  background: linear-gradient(45deg, #5a8cff, #7c4dff);
  color: white;
  border-radius: 24rpx;
}

/* 导航栏样式 */
::v-deep(.van-nav-bar) {
  background: linear-gradient(45deg, #5a8cff, #7c4dff);
  color: white;
}

::v-deep(.van-nav-bar__title) {
  font-weight: 600;
  font-size: 18rpx;
  color: white;
}

/* 加载提示优化 */
::v-deep(.van-list__finished-text) {
  color: #999;
  font-size: 14rpx;
  padding: 20rpx;
  text-align: center;
}

/* 交互反馈 */
.custom-cell:active .label {
  transform: scale(1);
}

/* 添加回到顶部按钮样式 */
::v-deep(.van-back-top) {
  background: linear-gradient(45deg, #5a8cff, #7c4dff);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.16);
  right: 32rpx;
  bottom: 120rpx;
}

/* 用户信息区域样式 */
.info-card {
  padding: 16rpx 0;
}

.info-group {
  margin-bottom: 16rpx;
}

.info-group:last-child {
  margin-bottom: 0;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 8rpx 0;
}

.info-text {
  color: #333;
  font-weight: 500;
  font-size: 14rpx;
  line-height: 1.4;
}

.info-text.primary {
  color: #5a8cff;
}

.info-text.success {
  color: #41b48a;
}

.info-text.warning {
  color: #ffab47;
}

.info-text.danger {
  color: #ff5757;
}

.label {
  font-size: 12rpx;
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
  font-weight: 500;
  transform: scale(0.95);
  transition: all 0.2s;
}

.label.primary {
  background: rgba(90, 140, 255, 0.1);
}

.label.success {
  background: rgba(65, 180, 138, 0.1);
}

.label.warning {
  background: rgba(255, 171, 71, 0.1);
}

.label.danger {
  background: rgba(255, 87, 87, 0.1);
}
</style>
